<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 约球神器</title>
	<link rel="stylesheet" type="text/css" href="../css/std.css"/>
	<script type="text/javascript" src="../js/jquery-1.7.1.js">	</script>
	<script type="text/javascript" src="../js/common.js">	</script>
	<script type="text/javascript"  src="../js/pislider.js"> </script>
    <style type="text/css">
        *{margin:0 auto;padding:0;}
        html{height:100%;}
        img{vertical-align: top;}
		.info{ margin:20px 30px; border:0px solid #009; float:left;  line-height:1.6; width:240px}
   		.pic{ margin:20px 20px; float:left; height:164px; width:110px}
   		.title{font-size:18px; }	
		.text{font-size:12px; }
		.mainContent{width:920px; margin:0px  auto}
		.contentHead{font-size:14px; font-weight:bold; margin-top:20px}
		.contentBody{line-height:1.5; margin-top:20px}
		.liForAct{height:210px}
		.container{width:500px;margin:-20px -250px;background-color: #0000FF;left:50%;position: absolute;}
		.liScroll{}
		.box_shadow{
				filter:progid:DXImageTransform.Microsoft.Shadow(color=#808080,direction=120,strength=4);
				-moz-box-shadow: 2px 2px 10px #808080;
				-webkit-box-shadow: 2px 2px 10px #808080;
				box-shadow:2px 2px 10px #808080;
			}
		ul{border-bottom: 1px dashed #808080}
		
		/* slider bar start*/
		#scroll{width:960px;height:419px;overflow:hidden;position:absolute;left:-200px;top:50px;}
		.btn{position:absolute;top:120px;width:83px;height:141px;display:block;overflow:hidden;
		background:url(image/arrows.png) no-repeat;cursor:pointer;text-indent:-999em;}
		#btn_prev{left:-400px;}
		#btn_next{right:-400px;background-position:right bottom;}
		#slider_bar{width:100%;height:22px;position:absolute;top:300px;text-align:center;}
		#slider_bar a{width:16px;height:22px;display:inline-block;overflow:hidden;background:url(image/bullets.png) no-repeat;
		margin:0px 3px;}
		#slider_bar a.cur,#slider_bar a:hover{background-position:0px -21px;}
		
		#scroll .child{width:960px;height:300px;position:absolute;top:0px;display: block; border: 0px solid red;left:960px;}
		#scroll .child img{width:110px;height:164px;}
		#scroll_wrapper{position:relative;top:0px;}
    </style>
</head>

<body>

	<!--TOP-->
		<div class="hc">
			<!--LOGO & NAV-->
			<div style="display: inline-block;width: 630px;vertical-align: top;float: left">
				<div style="height: 70px;color: #0F91CF;font-size: 60px;font-family: Segoe UI;text-shadow: 1px 1px 1px #C1E0FF;display: inline">
					BALL FRIEND
				</div>
				<a href="#" id="placeSelector" style="margin-left: -10px;font-size: 16px;">广州</a>
				<div class="fixdiv"> </div>
			</div>
			<div style="padding-top: 10px;padding-bottom: 10px;">
				<div style="float: right">
					<a href="#">注册</a>
					<a href="#">登录</a>
				</div>
				<!--SEARCH-->
				<div style="display: inline-block;width: 290px;vertical-align: top;float: right;margin-right: 10px">
					<div>
						<img src="../image/btn_search.png" class="srch_btn"/>
						<input type="text" class="srch_inpt" maxlength="18" value="搜索活动...."/>
					</div>
					<div class="fixdiv"> </div>
				</div>
				<div class="fixdiv"> </div>
			</div>
		</div>
	
	
<!--content-->		
<div class="hc  box_shadow">
<div style="background-color:#00FFFF;width: 100%;height: 320px;margin: 70px;">
	<div class="container" >          
               <div id="scroll">
                             <ul class="child">
                               <li class="liScroll"> 	
                                     <img  class="pic" src="image/test.jpg"  />
                                     <div class="info">
                                       <div class="title">dadoudou</div>
	                            <div class="text">开始时间:6月22日 周五 10:00</div>
	                            <div class="text">结束时间:6月22日 周五 10:00</div>
	                            <div class="text">北京路314号联合书店5楼</div>
	                             <div class="text">发起人:xx</div>
	                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                                     </div>
                                     <img  class="pic" src="image/test.jpg"  />
                                     <div class="info">
                                        <div class="title">dadoudou</div>
                            <div class="text">开始时间:6月22日 周五 10:00</div>
                            <div class="text">结束时间:6月22日 周五 10:00</div>
                            <div class="text">北京路314号联合书店5楼</div>
                             <div class="text">发起人:xx</div>
                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                                     </div>
                               </li>
                               </ul>
                              <ul class="child">
                               <li> 	
                                     <img  class="pic" src="image/test.jpg"  />
                                     <div class="info">
                                       <div class="title">dadoudou</div>
                            <div class="text">开始时间:6月22日 周五 10:00</div>
                            <div class="text">结束时间:6月22日 周五 10:00</div>
                            <div class="text">北京路314号联合书店5楼</div>
                             <div class="text">发起人:xx</div>
                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                                     </div>
                                     <img  class="pic" src="image/test.jpg"  />
                                     <div class="info">
                                        <div class="title">dadoudou</div>
                            <div class="text">开始时间:6月22日 周五 10:00</div>
                            <div class="text">结束时间:6月22日 周五 10:00</div>
                            <div class="text">北京路314号联合书店5楼</div>
                             <div class="text">发起人:xx</div>
                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                                     </div>
                      
                               </li>
                               </ul>
                         </div>   
            <a href="#" id="btn_prev" class="btn">prev</a>
			<a href="#" id="btn_next" class="btn">next</a>
			<div id="slider_bar"> </div>
   </div>
</div> 



<div class="mainContent box_shadow">
	<div style=" float:left; width:140px; left:15px; text-align:left">
    	<div class="contentHead">时间</div>
        <div class="contentBody">
        	<ul>
				<li><a href="">今天</a></li>
                <li><a href="">明天</a></li>
                <li><a href="">周末</a></li>
                <li><a href="">最近一周</a></li>
                <li><a href="">全部日期</a></li>
            </ul>
        </div> 
        <div class="contentHead">地点</div>
        <div class="contentBody">
        	<ul>
            	 <li><a href="">全部(88)</a></li>
				<li><a href="">天河(22)</a></li>
                <li><a href="">海珠(22)</a></li>
                <li><a href="">越秀(22)</a></li>
                <li><a href="">荔湾(22)</a></li>
            </ul>
        </div> 
         <div class="contentHead">类型</div>
        <div class="contentBody">
        	<ul>
            	 <li><a href="">足球(88)</a></li>
				<li><a href="">网球(22)</a></li>
                <li><a href="">篮球(22)</a></li>
                <li><a href="">单排轮(22)</a></li>
                <li><a href="">其他(2212)</a></li>
            </ul>
        </div> 
    </div>
    <div style="float:left; width:510px; left:20px; text-align:left">
    	<div class="contentHead">今天,足球,共有22个活动</div>
        <div class="contentBody">
        	<ul>
            	<li class="liForAct"> 
                    <div>
                        <img  class="pic" src="image/test.jpg"  />
                        <div class="info">
                            <div class="title">dadoudou</div>
                            <div class="text">开始时间:6月22日 周五 10:00</div>
                            <div class="text">结束时间:6月22日 周五 10:00</div>
                            <div class="text">北京路314号联合书店5楼</div>
                             <div class="text">发起人:xx</div>
                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                        </div>
                    </div>
                </li>
                <li class="liForAct"> 
                    <div>
                        <img  class="pic" src="image/test.jpg"  />
                        <div class="info">
                            <div class="title">dadoudou</div>
                            <div class="text">开始时间:6月22日 周五 10:00</div>
                            <div class="text">结束时间:6月22日 周五 10:00</div>
                            <div class="text">北京路314号联合书店5楼</div>
                             <div class="text">发起人:xx</div>
                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                        </div>
                    </div>
                </li>
              	 <li class="liForAct"> 
                    <div>
                        <img  class="pic" src="image/test.jpg"  />
                        <div class="info">
                            <div class="title">dadoudou</div>
                            <div class="text">开始时间:6月22日 周五 10:00</div>
                            <div class="text">结束时间:6月22日 周五 10:00</div>
                            <div class="text">北京路314号联合书店5楼</div>
                             <div class="text">发起人:xx</div>
                            <div class="text"><strong>222</strong>人感兴趣|<strong>222</strong>人参加</div>
                        </div>
                    </div>
                </li> 
             </ul>
        </div>
    </div>
</div>

</div>
<script type="text/javascript">
/*
			$.fn.textRemindAuto = function(options){
				options = options || {};
				var defaults = {
					blurColor: "#999",
					focusColor: "#333",
					auto: true,
					chgClass: ""
				};
				var settings = $.extend(defaults,options);
				$(this).each(function(){
					if(defaults.auto){
						$(this).css("color",settings.blurColor);
					}
					var v = $.trim($(this).val());
					if(v){
						$(this).focus(function(){
							if($.trim($(this).val()) === v){
								$(this).val("");
							}
							$(this).css("color",settings.focusColor);
							if(settings.chgClass){
								$(this).toggleClass(settings.chgClass);
							}
						}).blur(function(){
							if($.trim($(this).val()) === ""){
								$(this).val(v);
							}
							$(this).css("color",settings.blurColor);
							if(settings.chgClass){
								$(this).toggleClass(settings.chgClass);
							}
						});	
					}
				});
			};
		(jQuery);
	*/

$(function(){
	$("#scroll").pislider({
		child:"child",
		slider_bar:"slider_bar",
		scrollTime:500,
		autoScroll:"true",
		autoTime:7000
	});
	
	$(".srch_inpt").textRemindAuto();
	
})
</script>
</body>
</html>
